<template>
	<view class="screen">
		<u-navbar title="筛选" :background="{ background: 'rgba(255,255,255)' }" title-color="#333333" title-size="36" :is-back="true" :border-bottom="false"></u-navbar>
		<view v-if="type == 1">
			<view class="flex" style="margin-bottom: 34rpx">
				<image src="@/static/pages1/screen.png" style="width: 32rpx; height: 32rpx"></image>
				<view style="margin-left: 22rpx">
					<text style="font-weight: 600; font-size: 32rpx; color: #333333">维度</text>
					<text style="font-weight: 400; font-size: 28rpx; color: #333333">（{{ list1.length }}/3）</text>
				</view>
			</view>
			<view class="flex-wrap">
				<view
					class="label"
					:class="{ label1: list1.includes(index) }"
					@click="list1.includes(index) ? deletescreen(index) : addscreen(index)"
					v-for="(item, index) in list"
					:key="index"
				>
					{{ item }}
				</view>
			</view>
		</view>
		<view v-if="type == 2">
			<view class="">
				<view class="flex" style="margin-bottom: 34rpx">
					<image src="@/static/pages1/screen.png" style="width: 32rpx; height: 32rpx"></image>
					<view style="margin-left: 22rpx">
						<text style="font-weight: 600; font-size: 32rpx; color: #333333">核心必选项</text>
					</view>
				</view>
				<view style="margin-bottom: 20rpx">
					<text style="font-weight: 600; font-size: 28rpx; color: #fc132f">*</text>
					<text style="font-weight: 600; font-size: 28rpx; color: #333333">城市</text>
				</view>
				<view @click="show = true" class="flex" style="border-bottom: 1rpx solid #eeeeee; padding: 14rpx">
					<view class="align-center">
						<view style="width: 180rpx"></view>
						<view>省</view>
					</view>
					<view class="align-center">
						<view style="width: 180rpx"></view>
						<view>市</view>
					</view>
					<view class="align-center">
						<view style="width: 180rpx"></view>
						<view>区</view>
					</view>
				</view>
				<u-picker v-model="show" mode="region" @confirm="confirm"></u-picker>
				<view style="margin: 40rpx 0; background: rgba(238, 238, 238, 0.6); border-radius: 16rpx; padding: 40rpx">
					<view style="margin-bottom: 50rpx">
						<view class="flex-between1">
							<view style="font-weight: 600; font-size: 28rpx; color: #333333">身高</view>
							<view style="font-weight: 600; font-size: 28rpx; color: #999999">{{ minheight }}-{{ maxheight }}cm</view>
						</view>
						<slider-range
							:backgroundStyle="{
								background: '#DDDDDD'
							}"
							:min="140"
							:max="220"
							:scale="{
								show: false,
								min: true
							}"
							@change="changeSliderValue"
						></slider-range>
					</view>
					<view style="margin-bottom: 50rpx">
						<view class="flex-between1">
							<view style="font-weight: 600; font-size: 28rpx; color: #333333">收入</view>
							<view style="font-weight: 600; font-size: 28rpx; color: #999999">{{ minsr }}-{{ maxsr }}w</view>
						</view>
						<slider-range
							:backgroundStyle="{
								background: '#DDDDDD'
							}"
							:min="0"
							:max="50"
							:scale="{
								show: false,
								min: true
							}"
							@change="changeSliderValue1"
						></slider-range>
					</view>
					<view style="margin-bottom: 50rpx">
						<view class="flex-between1">
							<view style="font-weight: 600; font-size: 28rpx; color: #333333">体重</view>
							<view style="font-weight: 600; font-size: 28rpx; color: #999999">{{ minweight }}-{{ maxweight }}kg</view>
						</view>
						<slider-range
							:backgroundStyle="{
								background: '#DDDDDD'
							}"
							:min="30"
							:max="300"
							:scale="{
								show: false,
								min: true
							}"
							@change="changeSliderValue2"
						></slider-range>
					</view>
				</view>

				<view class="flex" style="margin-bottom: 34rpx">
					<image src="@/static/pages1/screen1.png" style="width: 32rpx; height: 32rpx"></image>
					<view style="margin-left: 22rpx">
						<text style="font-weight: 600; font-size: 32rpx; color: #333333">教育与职业</text>
					</view>
				</view>
				<view class="flex-wrap" style="margin-bottom: 34rpx">
					<view
						class="label"
						:class="{ label1: list3.includes(index) }"
						@click="list3.includes(index) ? deletescreen1(index) : addscreen1(index)"
						v-for="(item, index) in list2"
						:key="index"
					>
						{{ item }}
					</view>
				</view>
				<view class="flex" style="margin-bottom: 34rpx">
					<image src="@/static/pages1/screen2.png" style="width: 32rpx; height: 32rpx"></image>
					<view style="margin-left: 22rpx">
						<text style="font-weight: 600; font-size: 32rpx; color: #333333">家庭背景</text>
					</view>
				</view>
				<view class="flex-wrap">
					<view
						class="label"
						:class="{ label1: list5.includes(index) }"
						@click="list5.includes(index) ? deletescreen2(index) : addscreen2(index)"
						v-for="(item, index) in list4"
						:key="index"
					>
						{{ item }}
					</view>
				</view>
			</view>
		</view>
		<view class="flex-center1" style="position: fixed; bottom: 88rpx; left: 0; width: 100%">
			<view
				v-if="type == 1"
				@click="type = 2"
				class="flex-center1"
				style="width: 640rpx; height: 96rpx; background: #fc132f; border-radius: 48rpx; font-size: 32rpx; color: #ffffff"
			>
				下一步
			</view>
			<view v-if="type == 2" style="width: 100%; padding: 0 32rpx" class="flex-between">
				<view
					class="flex-center1"
					style="width: 220rpx; height: 96rpx; background: #ffffff; border-radius: 48rpx; border: 2rpx solid #fc132f; font-size: 32rpx; color: #fc132f"
				>
					上一步
				</view>
				<view class="flex-center1" style="width: 426rpx; height: 96rpx; background: #fc132f; border-radius: 48rpx; font-weight: 600; font-size: 32rpx; color: #ffffff">
					开始匹配
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import SliderRange from '@/components/tianzai-slider-range';
export default {
	components: {
		SliderRange
	},
	data() {
		return {
			type: 2,
			show: false,
			list: ['个人属性', '经济与社会性背景', '个人兴趣与信仰', '生活习惯与健康', '心理与情感'],
			list1: [],
			list2: ['教育背景', '工作稳定性', '收入期望', '职业规划', '地域因素'],
			list3: [],
			list4: ['家庭结构', '家庭观念', '地域因素', '经济条件'],
			list5: [],
			minheight: 140,
			maxheight: 220,
			minsr: 0,
			maxsr: 50,
			minweight: 30,
			maxweight: 300
		};
	},
	methods: {
		addscreen(index) {
			if (this.list1.length == 3) return this.$tools.toast('最多添加3个');
			this.list1.push(index);
		},
		deletescreen(index) {
			this.list1 = this.list1.filter((item) => item !== index);
		},
		addscreen1(index) {
			this.list3.push(index);
		},
		deletescreen1(index) {
			this.list3 = this.list3.filter((item) => item !== index);
		},
		addscreen2(index) {
			this.list5.push(index);
		},
		deletescreen2(index) {
			this.list5 = this.list5.filter((item) => item !== index);
		},
		confirm(e) {
			console.log(e);
		},
		changeSliderValue(e) {
			console.log(e);
			this.minheight = e.firstValue;
			this.maxheight = e.secondValue;
		},
		changeSliderValue1(e) {
			console.log(e);
			this.minsr = e.firstValue;
			this.maxsr = e.secondValue;
		},
		changeSliderValue2(e) {
			console.log(e);
			this.minweight = e.firstValue;
			this.maxweight = e.secondValue;
		}
	}
};
</script>

<style lang="less" scoped>
.screen {
	padding: 0 32rpx 300rpx;

	.label {
		padding: 18rpx 50rpx;
		background: rgba(238, 238, 238, 0.6);
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #666666;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}
	.label1 {
		background: rgba(252, 19, 47, 0.1);
		color: #fc132f;
	}
}
</style>
